<!DOCTYPE html>
<html lang="en">
<head>
<title>How can I make images more accessible?</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="" name="description">
<link href="../css/help.css" media="all" rel="stylesheet" type="text/css" charset="utf-8">
<link href="/library/webjars/fontawesome/4.7.0/css/font-awesome.min.css" media="screen" rel="stylesheet">
<link href="/library/skin/morpheus-default/tool.css" media="screen" rel="stylesheet" type="text/css" charset="utf-8">
<script src="/library/webjars/jquery/1.12.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/library/js/headscripts.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    includeWebjarLibrary('featherlight');
    $(document).ready(function(){
      $("a.screensteps-image-zoom").featherlight({
        type: { image:true },
        closeOnClick: 'anywhere'
      }); 
    });   
</script>
</head>
<body>
  <div><div>
<div><h1 class="article-title">How can I make images more accessible?</h1></div>
<div>



    <div class="step-instructions screensteps-textblock screensteps-wrapper--introduction screensteps-wrapper">
  <div id="text-content_25753C39-F826-4D12-8F05-805715CD62F4" class="text-block-content">
    <p>Users with some disabilities will be unable to see images and/or comprehend what they are meant to convey. <strong>Alternative Text</strong> can help give context and meaning to an image.</p>
  </div>
</div>

      <div class="step screensteps-section screensteps-depth-1" id="when-to-add-alternative-text-descriptions-for-images">
    <h2 class="step-title screensteps-heading">When to Add Alternative Text Descriptions for Images</h2>
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_C5EDC001-C5BC-4EDC-B728-52565C5DB987" class="text-block-content">
    <ul>
<li>
<strong>Simple image with "simple meaning" </strong>- Add descriptive alternative text of 10 to 169 characters as outlined below. The alternative text should describe the educational/informational purpose of the image.</li>
<li>
<strong>Complex image with "rich meaning"</strong> - Add a paragraph above or below the image that goes into more detail. Some pointers, such as "Next image," or "Previous image," will help tie them together. If the image is referenced from elsewhere in the document, add a paragraph below it that can serve as a caption, and then refer to it. If the longer alternative text is not feasible, create a link to an external Web page that contains an appropriate description.</li>
<li>
<strong>Decorative image</strong> - If the image is purely decorative or used for visual formatting, the alternative text description should be left blank to hide it from users of assistive technology.</li>
</ul>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="examples-of-text-alternatives-for-images">
    <h2 class="step-title screensteps-heading">Examples of Text Alternatives for Images</h2>
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_CF04ED83-F956-408B-A9D7-9087D82FBF67" class="text-block-content">
    <ul>
<li>
<strong>Alternative Text:</strong> “Scientist in a lab filling a vial with fluid”</li>
<li>
<strong>Description in the text before or after the image:</strong> “The next/previous image shows a female forensic scientist who is filling a vial containing a small amount of blood with fluid to denature the sample as part of the process of the PCR analysis method of DNA profiling. In the background is a centrifuge, which will aid in the process of extracting the DNA from the sample of blood.”</li>
<li>
<strong>Reference farther away in the body of the document: </strong>"... Figure 1.3 shows the correlation between the...." [Image] Figure 1.3</li>
</ul>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="steps-to-add-alternative-text-to-a-newly-embedded-image">
    <h2 class="step-title screensteps-heading">Steps to Add Alternative Text to a Newly Embedded Image</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/003/131/510/original/23fc5ce5-d44b-42f2-b367-25bb227f7aec.png" alt="" height="768" width="850">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_84416B0C-DE0C-47B0-9D53-BB0F44A8AAD8" class="text-block-content">
    <ol>
<li>If you do not already have an image embedded in the text box, click on the <strong>Image</strong> icon in the Rich Text Editor's toolbar to insert an image. The <strong>Image</strong> icon displays a picture that looks like a landscape, with mountains and a sun.  For more information on adding an image, please see the article <a href="content.hlp?docId=howdoiembedanimageinatextbox">How do I embed an image in a text box?</a>
</li>
<li>In the <em>Image Properties</em> dialog window, enter short, meaningful descriptive text in the <strong>Alternative Text</strong> box.</li>
<li>Click <strong>OK</strong> to confirm the addition of the text.</li>
</ol>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="Steps-to-Add-Alternative-Text-to-an-Existing-Image">
    <h2 class="step-title screensteps-heading">Steps to Add Alternative Text to an Existing Image</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/005/030/072/original/4d2b2793-5dd8-4ec3-bbb7-4f5550d1c822.png" alt="" height="1018" width="841">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_684541EA-10F9-49B3-A828-880860C868D6" class="text-block-content">
    <ol>
<li>Click on the image you have embedded in the text box to select it.</li>
<li>Click on the <strong>Image</strong> icon in the Rich Text Editor's toolbar. The <strong>Image</strong> icon displays a picture that looks like a landscape, with mountains and a sun.</li>
<li>In the <em>Image Properties</em> dialog window, enter short, meaningful descriptive text in the <strong>Alternative Text</strong> box. </li>
<li>Click <strong>OK</strong> to confirm the addition of the text.</li>
</ol>
  </div>
</div>
 
  </div>


</div>
</div></div>
</body>
</html>
